<template>
    <el-dialog v-model="dialogVisible" title="添加媒资" :before-close="cancelDialog" width="30%">
        <el-form :model="createFormData" :rules="rules" label-width="80px" ref="createFormRef">
            <el-form-item prop="mediatype" label="媒资类型">
                <el-select placeholder="请选择媒资类型" clearable v-model="createFormData.mediatype" @change="getMediaTpl" style="width: 100%">
                    <el-option
                        v-for="(item,index) in mediaTypeKeyValue"
                        :key="index"
                        :value="index"
                        :label="item"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="mediatpl" label="媒资模板">
                <el-select placeholder="请选择媒资模板" clearable v-model="createFormData.mediatpl" style="width: 100%">
                    <el-option
                        v-for="(item,index) in mediaTplKeyValue"
                        :key="index"
                        :value="index"
                        :label="item"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div align="center">
                <el-button type="primary" size="small" @click="nextStep">下一步</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {toRef, ref, reactive} from 'vue'
    import {getTplData} from "@/api/media/mediatype";
    import { useRouter } from 'vue-router';
    export default {
        name: "",
        components: {},
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            mediaTypeKeyValue: {
                type: Object,
            },
            formData: {
                type: Object
            },
        },
        emits: ['cancelCreateDialog'],
        setup(props, context) {
            const router = useRouter();
            const dialogVisible = toRef(props, 'visible')
            const createFormData = toRef(props, 'formData')
            const createFormRef = ref(null)
            const mediaTplKeyValue = ref({})
            const cancelDialog = () => {
                context.emit('cancelCreateDialog')
            }
            const getMediaTpl = () => {
                mediaTplKeyValue.value = {};
                getTplData({pagesize: 200,mediatype: createFormData.value.mediatype}).then(response => {
                    response.data.list.forEach(tplData => {
                        mediaTplKeyValue.value[tplData.tplid] = tplData.typename
                    })
                })
            }
            
            const rules = reactive({
                mediatype: [{required: true, message: '请选择媒资类型', trigger: 'change'}],
                mediatpl: [{required: true, message: '请选择媒资模板', trigger: 'change'}]
            })
            const nextStep = () => {
                createFormRef.value.validate(valid => {
                    if (valid) {
                        router.push({name:'createmedia',query: createFormData.value})
                    }
                })
            }
            return {
                dialogVisible,
                createFormRef,
                createFormData,
                mediaTplKeyValue,
                rules,
                cancelDialog,
                getMediaTpl,
                nextStep
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>